<template>
  <div class="v-contaier">
    <div class="v-side">
      <div class="title">媒体素材库</div>
      <div class="side-menus">
        <div class="item" :class="{ active: type === 1 }" @click="
          type = 1;
        getList(1);
        ">
          图片素材
        </div>
        <div class="item" :class="{ active: type === 2 }" @click="
          type = 2;
        getList(1);
        ">
          音频素材
        </div>
        <div class="item" :class="{ active: type === 3 }" @click="
          type = 3;
        getList(1);
        ">
          视频素材
        </div>
      </div>
    </div>

    <div class="v-content">
      <div class="v-header">
        <div>
          <el-button class="v-mr-10" :disabled="tableDataSelected.length === 0" @click="doDeleteBatch()"
            :loading="deleteLoading">批量删除</el-button>
          <el-input v-model="keyword" placeholder="请输入关键词" clearable style="width: 300px">
            <template #append>
              <el-button type="primary" @click="getList(1)">搜索</el-button>
            </template>
          </el-input>
        </div>

        <MediaUoload :type="type" @success="(row) => tableData.unshift(row)">
          <span v-if="type === 1">新增图片</span>
          <span v-if="type === 2">新增音频</span>
          <span v-if="type === 3">新增视频</span>
        </MediaUoload>
      </div>
      <div v-loading="loading" class="main">
        <el-table :data="tableData" border style="width: 100%" height="100%"
          @selection-change="(data) => (tableDataSelected = data)">
          <el-table-column type="selection" width="55" />
          <el-table-column v-if="type === 1" label="封面" width="150" align="center">
            <template #default="scope">
              <el-image style="width: 50px; height: 50px" :preview-teleported="true"
                :preview-src-list="[scope.row.UniqueKeyPreview]" :src="scope.row.UniqueKeyPreview" />
            </template>
          </el-table-column>
          <el-table-column v-if="type !== 1" label="播放" width="150" align="center">
            <template #default="scope">
              <div class="play-icon" @click="previewMedia(scope.row)">
                <el-icon :size="30">
                  <VideoPlay></VideoPlay>
                </el-icon>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="素材名称">
            <template #default="scope">
              <div class="material-name">
                <template v-if="scope.row.IsNameEdit">
                  <el-input size="small" type="text" v-model="scope.row.NameEdit" class="name v-mr-5"></el-input>
                  <el-button size="small" @click="scope.row.IsNameEdit = false">取消</el-button>
                  <el-button size="small" class="v-ml-5" :loading="scope.row.EditLoading"
                    @click="doSaveEditTitle(scope.row)">保存</el-button>
                </template>
                <template v-else>
                  <div class="name v-ellipsis">{{ scope.row.Name }}</div>
                  <el-button size="small" @click="doEditTitle(scope.row)">
                    <el-icon :size="12">
                      <EditPen />
                    </el-icon>
                  </el-button>
                </template>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="文件大小" width="150">
            <template #default="scope"> {{ (scope.row.Size / 1024 / 1024).toFixed(2) }}M </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="CreatedAt" width="200"></el-table-column>
          <el-table-column label="操作" width="100">
            <template #default="scope">
              <el-popconfirm icon-color="#626AEF" title="确认删除?" @confirm="doDelete(scope.row)">
                <template #reference>
                  <el-button :loading="scope.row.DeleteLoading" size="small" type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination background layout="total,sizes,prev, pager, next," :total="listTotal"
          @current-change="(page) => getList(page)" @size-change="(pageSIze) => getList(1, pageSIze)" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { EditPen, VideoPlay } from '@element-plus/icons-vue';
import type { ListForPageDataItem } from '@/api/modules/uploader';
import apiUploader from '@/api/modules/uploader';
import MediaUoload from './components/MediaUoload.vue';

const loading = ref(false);
const deleteLoading = ref(false);
const keyword = ref('');
const type = ref(1);
const tableData = ref<ListForPageDataItem[]>([]);
const tableDataSelected = ref<ListForPageDataItem[]>([]);
const listTotal = ref(0);
const page = ref(1);
const pageSize = ref(10);

const getList = async (toPage?: number, toPageSize?: number) => {
  page.value = toPage || page.value;
  pageSize.value = toPageSize || pageSize.value;
  loading.value = true;
  try {
    const { data } = await apiUploader.listForPage({
      Page: page.value,
      PageSize: pageSize.value,
      Keyword: keyword.value,
      Type: type.value,
    });
    listTotal.value = data.data.Total;
    tableData.value = data.data.Data;
  } catch (e) {
    console.error(e);
  }
  loading.value = false;
};

const doDelete = async (row: ListForPageDataItem) => {
  row.DeleteLoading = true;
  try {
    await apiUploader.delete({ Ids: [row.ID] });
    ElMessage.success('删除成功');
    getList();
  } catch (e) {
    console.error(e);
  }
  row.DeleteLoading = false;
};

const doDeleteBatch = async () => {
  try {
    await ElMessageBox.confirm('确认删除选中项么?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    });
    deleteLoading.value = true;
    await apiUploader.delete({ Ids: tableDataSelected.value.map((item) => item.ID) });
    ElMessage.success('删除成功');
    getList();
  } catch (e) {
    console.error(e);
  }
  deleteLoading.value = false;
};

const doEditTitle = (row: ListForPageDataItem) => {
  row.NameEdit = row.Name;
  row.IsNameEdit = true;
};

const doSaveEditTitle = async (row: ListForPageDataItem) => {
  if (!row.NameEdit) {
    ElMessage.error('素材名称必填');
    return;
  }
  row.EditLoading = true;
  try {
    await apiUploader.edit({ ID: row.ID, Name: row.NameEdit });
    row.Name = row.NameEdit;
    row.IsNameEdit = false;
    ElMessage.success('更新成功');
  } catch (e) {
    console.error(e);
  }
  row.EditLoading = false;
};

const previewMedia = (row: ListForPageDataItem) => {
  window.open(row.UniqueKeyPreview);
};

getList(1);
</script>

<style scoped>
.v-contaier {
  display: flex;
  height: 100%;
}

.v-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.v-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.v-side {
  width: 200px;
  padding-right: 20px;
  box-sizing: border-box;
}

.v-side .title {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #ddd;
  margin-bottom: 30px;
}

.side-menus {
  text-align: center;
}

.side-menus .item {
  padding: 10px 0;
  margin-bottom: 10px;
  border-radius: 4px;
  cursor: pointer;
}

.side-menus .item.active {
  background: #79bbff;
  color: #fff;
}

.main {
  flex: 1;
  height: 100%;
  overflow-y: auto;
}

.header-left {
  display: flex;
  align-items: center;
}

.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.material-name {
  display: flex;
  align-items: center;
  width: 100%;
}

.material-name .name {
  flex: 1;
}

.material-name :deep(.el-button--small) {
  padding-left: 5px;
  padding-right: 5px;
}

.play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>
